<template>
  <div class="main">
    <!--  頂部搜索欄-->
    <div class="header">
      <div class="flex">
        <div class="flex">
          <div class="flex">
            <div style="width:80px;text-align: center;">发起时间：</div>
            <el-date-picker
              v-model="params.time"
              size="small"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chooseTime"
            >
            </el-date-picker>
          </div>
          <div class="flex">
            <div style="width:60px;text-align: center;margin-left: 15px">仓库：</div>
            <el-select v-model="params.warehouseId" clearable placeholder="请选择" size="small">
              <el-option
                v-for="item in wareHouseList"
                :key="item.warehouseId"
                :label="item.warehouseName"
                :value="item.warehouseId">
              </el-option>
            </el-select>
          </div>
          <div class="flex">
            <div style="width:80px;text-align: center;margin-left: 15px">报销类型：</div>
            <el-select v-model="params.type" clearable placeholder="请选择" size="small">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="flex">
            <div style="width:80px;text-align: center;margin-left: 15px">审批状态：</div>
            <el-select v-model="params.status" clearable placeholder="请选择" size="small">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="flex">
            <div style="width:80px;text-align: center;margin-left: 15px">承担主体：</div>
            <el-select v-model="params.optioner" clearable placeholder="请选择" size="small">
              <el-option
                v-for="item in optionList"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="flex">
            <el-button style="background:#ff6a00;color: whitesmoke;margin-left: 15px" size="small"
                       @click="getFinanceList">查询
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!--    页面 费用报销展示表格-->
    <div class="tabsCard">
      <div class="btn">
        <el-button style="background:#ff6a00;color: whitesmoke;" size="medium" @click="openDialog('add')">新增费用报销
        </el-button>

      </div>
      <el-table :data="financeData"
                height="calc(100vh - 280px)"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                v-loading="loading"
                border
                style="width: 100%; font-size: 12px"
                :headerCellStyle="{
              textAlign: 'center',
              fontWeight: '400',
              background: '#ff6a00',
              color: 'white',
            }"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
      >
        <el-table-column type="index" label="序号" width="50px" />
        <el-table-column prop="warehouseId" label="仓库" min-width="50px">
          <template slot-scope="scope">
            <span v-if="scope.row.warehouseId===1">宁乡仓</span>
            <span v-if="scope.row.warehouseId===2">广东仓</span>
            <span v-if="scope.row.warehouseId===4">广西仓</span>
            <span v-if="scope.row.warehouseId===5">云南仓</span>
            <span v-if="scope.row.warehouseId===11">贵州仓</span>
            <span v-if="scope.row.warehouseId===7">河南仓</span>
            <span v-if="scope.row.warehouseId===10">重庆仓</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="费用产生时间" min-width="50px" />
        <el-table-column prop="createdAt" label="录入系统时间" min-width="50px" />
        <el-table-column prop="financeAmount" label="金额" min-width="30px" />
        <el-table-column prop="voucher" label="凭证" min-width="80px">
          <template slot-scope="scope">
            <!--              <span v-if="item.key === 'paymentVouchers'&&!['GD', , 'GX'].includes(userName)">-->
            <el-image v-for='(v, i) in scope.row.financeVouchersList' :key="i" style="width: 50px; height: 50px"
                      ref="preview" :src="v" :preview-src-list="scope.row.financeVouchersList">

            </el-image>
            <!--              </span>-->
            <!--            <span v-else>{{ scope.row[item.key] }}</span>-->
          </template>
        </el-table-column>
        <el-table-column label="报销类型" min-width="50px">
          <template slot-scope="scope">
            <span v-if="scope.row.type===1">采购运费</span>
            <span v-if="scope.row.type===2">调货运费</span>
            <span v-if="scope.row.type===3">销售运费</span>
            <span v-if="scope.row.type===4">售后运费</span>
            <span v-if="scope.row.type===5">叉车费用</span>
            <span v-if="scope.row.type===6">仓库租金</span>
            <span v-if="scope.row.type===7">其他支出</span>
            <span v-if="scope.row.type===8">其他收入</span>
            <span v-if="scope.row.type===9">罚款</span>
          </template>
        </el-table-column>
        <el-table-column label=承担方 min-width="50px">
          <template slot-scope="scope">
            <span v-if="scope.row.optioner===1">公司</span>
            <span v-if="scope.row.optioner===2">公司和仓库</span>
            <span v-if="scope.row.optioner===3">仓库</span>
            <span v-if="scope.row.optioner===4">工厂</span>
          </template>
        </el-table-column>

        <el-table-column prop="userName" label="发起人" min-width="50px" />
        <el-table-column prop="remark" label="说明" min-width="80px" />
        <el-table-column prop="status" label="审批状态" min-width="50px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===1" type="primary" plain>通过</el-tag>
            <el-tag v-if="scope.row.status===2" type="danger" plain>驳回</el-tag>
            <el-tag v-if="scope.row.status===0" type="info" plain>未审核</el-tag>
          </template>

        </el-table-column>
        <el-table-column label="操作" min-width="50px">
          <template slot-scope="scope">
            <el-link v-if="scope.row.status===0&&(userName === 'admin' ||userName=='王伯维'||userName=='沈旭滨'||userName=='王健'||userName=='袁文典')"
                     type="warning" style="margin-right: 10px"
                     @click="openDialog(scope.row)">审 核
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <!--      分页-->
      <el-pagination
        style="margin-top: 20px"
        align="right"
        @size-change="handleFinanceSizeChange"
        @current-change="handleFinanceCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
    <!--    新增费用报销弹窗-->
    <div class="dialogCard">
      <el-dialog
        :visible.sync="addFinanceList"
        :before-close="handleClose"
        v-if="addFinanceList"
        width="60%"
        center
      >
        <div style="background-color: white">
          <img src="@/assets/img/header0.png" style="width: 100%" />
          <div class="title" style="" v-if="optStatus==='add'">新增费用报销</div>
          <div class="title" style="" v-if="optStatus!=='add'">审核报销信息</div>
          <div class="formContent">
            <el-card style="margin-top:10px">
              <!--              新增、修改表单-->
              <el-row>
                <el-col :span="12">
                  <div class="flexBox">
                    <div class="dataInput">仓库<span style="color: red;">*</span></div>
                    <el-select
                      style="width: 75%"
                      filterable
                      clearable
                      :disabled="disable"
                      size="small"
                      v-model="addFinanceForm.warehouseId"
                      placeholder="请选择仓库"
                    >
                      <!--                        销售列表-->
                      <el-option v-for="item in wareHouseList" :key="item.warehouseId" :label="item.warehouseName"
                                 :value="item.warehouseId"></el-option>

                    </el-select>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flexBox">
                    <div class="dataInput">费用类型<span style="color: red;">*</span></div>
                    <el-select
                      style="width: 75%"
                      filterable
                      clearable
                      :disabled="disable"
                      size="small"
                      @change="changeFeeType"
                      v-model="addFinanceForm.feeType"
                      placeholder="请选择费用类型"
                    >
                      <!--                        销售列表-->
                      <el-option v-for="item in feeList" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>

                    </el-select>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flexBox">
                    <div class="dataInput">报销类型<span style="color: red;">*</span></div>
                    <el-select
                      style="width: 75%"
                      size="small"
                      :disabled="disable"
                      v-model="addFinanceForm.type"
                      placeholder="请选择报销类型"
                      @change="getTargetList"
                    >
                      <div v-if="addFinanceForm.feeType===2||income">
                        <el-option v-for="item in typeList" :key="item.value" :label="item.name"
                                   :value="item.value"></el-option>
                      </div>
                      <div v-if="addFinanceForm.feeType===1">
                        <el-option v-for="item in typeListFee" :key="item.value" :label="item.name"
                                   :value="item.value"></el-option>
                      </div>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flexBox">
                    <div class="dataInput">发起时间<span style="color: red;">*</span></div>
                    <el-date-picker
                      style="width: 75%;"
                      :disabled="disable"
                      v-model="addFinanceForm.time"
                      size="small"
                      type="date"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flexBox">
                    <div class="dataInput">金额<span style="color: red;">*</span></div>
                    <el-input
                      style="width: 75%"
                      size="small"
                      :disabled="disable"
                      v-model="addFinanceForm.financeAmount"
                    ></el-input>
                  </div>
                </el-col>
                <el-col :span="12" v-if="optStatus!=='add'">
                  <div class="flexBox">
                    <div class="dataInput">承担主体<span style="color: red;">*</span></div>
                    <el-select
                      size="small"
                      style="width: 75%"
                      v-model="optioner"
                      placeholder="请选择承担主体"
                    >
                      <el-option v-for="item in optionList" :key="item.value" :label="item.name"
                                 :value="item.value"></el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flexBox" v-if="[1,2,3].includes(addFinanceForm.type)">
                    <div class="dataInput">关联订单</div>
                    <el-select
                      size="small"
                      style="width: 75%"
                      :disabled="disable"
                      filterable
                      v-model="addFinanceForm.targetId"
                      placeholder="请选择关联订单"
                    >
                      <div v-if="addFinanceForm.type===1">
                        <el-option v-for="item in targetList" :key="item.procureId"
                                   :label="item.procureId+item.orderName"
                                   :value="item.procureId">
                          {{ item.procureId + `-` + item.orderName }}
                        </el-option>
                      </div>
                      <div v-if="addFinanceForm.type===2">
                        <el-option v-for="item in targetList" :key="item.transferId"
                                   :label="item.transferId+item.orderName"
                                   :value="item.transferId">
                          {{ item.transferId + `-` + item.orderName }}
                        </el-option>
                      </div>
                      <div v-if="addFinanceForm.type===3">
                        <el-option v-for="item in targetList" :key="item.saleId" :label="item.saleId+item.storeName"
                                   :value="item.saleId">
                          {{ item.saleId + `-` + item.storeName }}
                        </el-option>
                      </div>

                    </el-select>
                  </div>
                </el-col>
                <el-col>
                  <div class="flexBox">
                    <div class="dataInput">情况说明</div>
                    <el-input
                      style="width: 88%"
                      size="small"
                      type="textarea"
                      :disabled="disable"
                      v-model="addFinanceForm.remark"
                    ></el-input>
                  </div>
                </el-col>
                <el-col>

                  <!--                  图片凭证 新增页面为上传 审核页面为展示-->

                  <div style=" display: flex;margin-top: 30px;justify-content:center" v-if="optStatus==='add'">
                    <div class="dataInput">凭证<span style="color: red;">*</span></div>
                    <div class="div">
                      <rayUpload @url="getImageUrl"></rayUpload>
                    </div>
                  </div>

                  <div v-if="optStatus!=='add'" style=" display: flex;margin-top: 30px;justify-content:center">
                    <div class="dataInput">凭证</div>
                    <el-image v-for='(v, i) in addFinanceForm.financeVouchersList' :key="i"
                              style="width: 200px; height: 150px;"
                              ref="preview" :src="v" :preview-src-list="addFinanceForm.financeVouchersList">

                    </el-image>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <div class="add" v-if="optStatus==='add'">
        <el-button @click="handleClose">取 消</el-button>
        <el-button style="background:#ff6a00;color: whitesmoke" @click="fixedFinanceConfirm">确 定</el-button></div>
          <div class="option" v-if="optStatus!=='add'">
             <el-button @click="audit(1)" type="warning">通过</el-button>
             <el-button type="danger" @click="audit(2)">驳回</el-button>
          </div>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import modifyFinance from "./components/modifyFinance.vue";
import tableMixins from "@/mixins/tableMixins.vue";
import quinn from "@/utils/quinn";
import rayUpload from "@/RayComponents/rayUpload.vue";
import rayMulImageUpload from "@/RayComponents/rayMulImageUpload.vue";

export default {
  components: {
    rayUpload,
    rayMulImageUpload,
  },
  name: "FinanceList",
  // mixins: [tableMixins],
  // components: { modifyFinance },
  meta: { title: "费用报销", icon: "el-icon-s-ticket", sort: 7, authority: 109 },
  mounted() {
    this.userName = quinn.getStorage("userDatav3").userName;
    this.$nextTick(() => {
      this.maxHeight = window.innerHeight - 240;
    });
    window.onresize = () => {
      this.$nextTick(() => {
        this.maxHeight = window.innerHeight - 240;
      });
    };
  },
  data() {
    return {
      apiName: "financeFinanceList",
      financeVouchersList: [],
      addFinanceList: false,
      financeImage: "",
      disable: false,
      userName: '',
      loading: false,
      optStatus: "",
      tittle: "",
      income: false,
      imgHost: this.$imgHost,
      currentPage: 1,
      count: 0,
      optioner: "",
      addFinanceForm: {
        warehouseId: "",
        type: "",
        time: "",
        finance: "",
        targetId: "",
        remark: "",
        status: 0,
        feeType: "",
      },
      feeList: [{
        value: 1,
        label: "收入"
      }, {
        value: 2,
        label: "支出"
      }],
      params: {
        startTime: "",
        endTime: "",
        pageNumber: 1,
        pageSize: 20,
        warehouseId: "",
        type: "",
        status: "",
        optioner: "",
      },
      targetList: [],
      optionList: [{
        value: 1,
        name: "公司"
      }, {
        value: 2,
        name: "公司和仓库"
      }, {
        value: 3,
        name: "仓库"
      }, {
        value: 4,
        name: "工厂"
      },],
      wareHouseList: [],
      typeList: [{
        value: 1,
        name: "采购运费"
      }, {
        value: 2,
        name: "调货运费"
      },
        {
          value: 3,
          name: "销售运费"
        },
        {
          value: 4,
          name: "售后运费"
        }, {
          value: 5,
          name: "叉车费用"
        }, {
          value: 6,
          name: "仓库租金"
        }, {
          value: 7,
          name: "其他支出"
        }],
      typeListFee: [{
        value: 8,
        name: "其他收入"
      }, {
        value: 9,
        name: "罚款"
      }],
      statusList: [
        {
          value: "1",
          name: "已通过"
        }, {
          value: "2",
          name: "已驳回"
        }
      ],
      financeData: [],
    }
  },
  created() {
    //仓库
    this.getWareList()
    //列表
    this.getFinanceList()
  },
  methods: {
    //判斷操作權限
    // const { userName = [] } =
    //   quinn.getStorage("userDatav3") || store.state.userData || {};
    // this.userName = userName;
    //获取费用报销列表
    getFinanceList() {
      this.loading = true
      this.$api.financeFinanceList(this.params).then(res => {
        this.loading = false
        res.rows.map(el => {
          if (el.financeVouchers) {
            el.financeVouchers = el.financeVouchers.split(',');
            el.financeVouchersList = [];
            el.financeVouchers.map(k => {
              el.financeVouchersList.push(this.$imgHost + k);
            })
          }
        })
        this.financeData = res.rows
        this.count = res.count
      })
    },
    //获取仓库列表
    getWareList() {
      const params = {
        pageNumber: 1,
        pageSize: 10000,
      }
      this.$api.warehouseWarehouseList(params).then(res => {
        this.wareHouseList = res.rows
      })
    },
    //切换费用类型后清空报销类型
    changeFeeType() {
      this.addFinanceForm.type = ""
    },
    // 弹窗
    openDialog(val) {
      this.addFinanceList = true
      this.optStatus = val
      if (val === 'add') {
        this.disable = false
      } else {
        this.disable = true
        this.addFinanceForm = val
      }
    },
    // 搜索栏时间切换
    chooseTime(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.params.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    // 关闭弹窗
    handleClose() {
      this.addFinanceList = false
      this.addFinanceForm = this.$options.data.call(this).addFinanceForm
    },
    getImageUrl(e) {
      this.imageList = e
      console.log(this.imageList, "图片")
    },
    // 提交费用报销表单
    fixedFinanceConfirm() {
      if (!this.addFinanceForm.warehouseId) {
        this.$message.error('请选择仓库!');
        return;
      } else if (!this.addFinanceForm.type) {
        this.$message.error('请选择报销类型！')
        return;
      } else if (!this.addFinanceForm.time) {
        this.$message.error('请选择发起时间！')
        return;
      } else if (typeof Number(this.addFinanceForm.finance) !== 'number') {
        this.$message.error('请填写正确的金额！')
        return;
      } else if (!this.imageList) {
        this.$message.error('请上传凭证！')
        return;
      }

      this.addFinanceForm.time = dayjs(this.addFinanceForm.time).format("YYYY-MM-DD");
      const data = {
        ...
          this.addFinanceForm,
        financeVouchers: this.imageList
      }
      this.$api.financeFinanceAdd(data).then(res => {
        this.$message({ message: '添加成功！', type: 'success' })
        this.handleClose()
        this.getFinanceList()
      })
    },
    //审核
    audit(val) {
      if (val === 1) {
        if (!this.optioner) {
          this.$message.error('请选择承担方后提交!');
          return;
        }
      }
      const data = {
        optioner: this.optioner,
        status: val,
        financeId: this.addFinanceForm.financeId
      }
      this.$api.financeFinanceStatusUpdate(data).then(res => {
        this.$message({ message: '操作完成！', type: 'success' })
        this.handleClose()
        this.optioner = ""
        this.getFinanceList()
      })
    },
    // 分页
    handleFinanceSizeChange(val) {
      this.params.pageSize = val
      this.getFinanceList()
    },
    handleFinanceCurrentChange(val) {
      this.params.pageNumber = val
      this.getFinanceList()
    },
    // 选择报销类型后 选项为支出 显示关联单号
    getTargetList(val) {
      this.addFinanceForm.targetId = ''
      const params = {
        pageNumber: 1,
        pageSize: 10000,
      }
      if (val === 1) {
        this.$api.procureProcureList(params).then(res => {
          this.targetList = res.rows
        })
      } else if (val === 2) {
        this.$api.materialTransferMaterialTransferList(params).then(res => {
          this.targetList = res.rows
        })
      } else if (val === 3) {
        this.$api.saleSaleList(params).then(res => {
          this.targetList = res.rows
        })
      }
    }
  }
};
</script>

<style lang="less" scoped>
.btn {
  display: flex;
  justify-content: start;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabsCard {
  margin-top: 20px;
}

.dataInput {
  margin-bottom: 10px;
  font-weight: 800;
  margin-right: 10px;
}

.title {
  padding: 20px 20px;
  margin-top: -10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  font-size: 18px;
  font-weight: 600;
}

.flexBox {
  display: flex;
  align-items: center;
  margin-top: 30px;
  justify-content: end;
}

.default /deep/ .el-button--primary {
  border-color: #ff6a00;
  background-color: #ff6a00;
}

.default /deep/ .el-button:hover {
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}

.default /deep/ .el-button:active {
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}

.default /deep/ .el-button:focus {
  color: #ff6a00;
  border-color: #fdf2e9;
  background-color: #fdf2e9;
}

/deep/ .el-input__inner:hover {
  border-color: #ff6a00 !important;
}

/deep/ .el-input__inner:focus {
  border-color: #ff6a00 !important;
}

/deep/ .selected {
  color: #ff6a00 !important;
}

/deep/ .active {
  color: #ff6a00 !important;
}

/deep/ .selected {
  color: #ff6a00 !important;
}

/deep/ .el-loading-text {
  color: #ff6a00 !important;
}

/deep/ .el-icon-loading {
  color: #ff6a00 !important;
}
</style>
